<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <title>登录注册</title>
    <style>
        #register{width: 350px;margin: auto;margin-top: 150px;background: rgba(255, 255, 255, 0.7);}
       
        body{background-image: url(image/timg.jpg);}
    </style>
</head>
<body>
    <div class="container">
        <div class="panel panel-primary" id="register">
            <div class="panel-heading">注册</div>
            <div class="panel-body">
                <div class="form-group">
                    <label for="username">用户名</label>
                    <input type="text" id="username" class="form-control">
                </div>
                <div class="form-group">
                    <label for="password">密码</label>
                    <input type="password" id="password" class="form-control">
                </div>
    
                <a href="#">马上登陆</a>
                <label>
                    <input type="checkbox" class="checkbox"> 30天内免登陆
                </label>
                <button id="btn1" class="btn btn-primary pull-right">注册</button>
            </div>
        </div>
    </div>
    <script src="js/jquery.min.js"></script>
    <script>

        console.log(document.cookie)
       
        // 设置cookie的通用函数
        
        function setCookie(key,value,expires){
            if(typeof expires === "object"){
                document.cookie = `${key}=${value};expires=${expires}`
            }
            if(typeof expires === "number"){
                let date = new Date();
                date.setDate(date.getDate() + expires);
                document.cookie = `${key}=${value};expires=${date}`
            }
        }
        // 读取cookie的通用函数
        function getCookie(k){
            let result = {}
            let arr = document.cookie.split("; ");
            arr.forEach(item=>{
                let key = item.split("=")[0];
                let value = item.split("=")[1];
                result[key] = value;
            })

            if(!k){
                return result;
            }
            return result[k];
        }


        //注册

        // $("input").eq(0).blur(function(){
        //     if(0){
        //         let newname = $("input").eq(0).val()
        //     }else{
        //         $("input").eq(0).css("border","red",)
        //     }
        // })

        // $("input").eq(1).blur(function(){
        //     if(1){
        //         let password = $("input").eq(1).val()
               
        //     }else{
        //         $("input").eq(1).css("border","red",)
        //     }
        // })
        $("#btn1").click(function(){
            $.ajax({
                url:`http://127.0.0.1:82/regi`,
                data:{
                    username:$("#username").val(),
                    password:$("#password").val()
                },
                success(data){
                    if(data==="success"){
                        alert("注册成功，请输入已有账号登录")
                       
                    }else{
                        if(data === "repeat"){
							alert("该用户名已存在")
						}
						else{
							alert("注册失败")
						}
                    }
                }
            })
        })


        // 登录
        let oa = document.getElementsByTagName("a")[0];
        oa.onclick = function(){    
            if($("input").eq(0).val()==="" || $("input").eq(1).val()===""){   
                return;
            }else{
                $.ajax({
                    url:`http://127.0.0.1:82/sign`,
                    success(data){
                        data = JSON.parse(data);         
                       
                        data.forEach(item => {                     
                            if(item.username===$("input").eq(0).val()&&item.password===$("input").eq(1).val()){
                                // document.getElementsByClassName("container")[0].style.display = "none";
                                sessionStorage.setItem("username",item.username); // 设置当前的用户名并保存，用来在跳转到student.html页面后做判断
                               
                                if(document.getElementsByClassName("checkbox")[0].checked){

                                    setCookie("username",$("#username").val(),30);
                                    setCookie("password",$("#password").val(),30);
                                }

                                $("a").attr("href","student.html");
                                oa.click()

                            }
                            // else{
                            //     alert("用户名或密码错误")  // 这儿我使用循环写的，如果当前查询的用户不在数据库的第一个，总是会进入这个逻辑，所以不可行

                            // }
                        });    
                    }
                })
            } 

        }
        // 回车登录
        $("body").keydown(function(event){
            if(event.keyCode===13){
                oa.click()
            }
        })

        // 30天免登录
        //这样写覆盖了上面的单击事件
        // oa.onclick = function(){
        //     if($(".checkbox").checked){
        //         setCookie("username",$("username").val(),30);
        //         setCookie("password",$("password").val(),30);
        //     }
        // }
        let k = document.cookie.username;
        if(document.cookie.username&&document.cookie.password){
            $("username").val(getCookie(document.cookie))
            $("password").val(document.cookie.password)
        }
       
        if(getCookie("username")&&getCookie("password")){
            // $("username").val(getCookie("username"));
            // $("password").val(getCookie("password"));
        }
      
            
    </script>

    <!-- http://127.0.0.1 相对地址，用于自己测试，当真正发布的时候不可以，因为客户请求是自己的IP -->
</body>
</html>